<template>
    <v-divider
        class="border-opacity-100"
        :thickness="4"
        color="info"
        style="margin-top: 10px"
    ></v-divider>
    <v-card
        color="#E8EAF6"
        style="padding: 0px"
    >
        <div
            style="
                margin: 5px 0 5px 0;
                display: flex;
                justify-content: space-between;
            "
        >
            <h4
                style="
                    margin: 3px 0 3px 5px;
                    color: grey;
                    justify-content: flex-start;
                "
            >
                border:
            </h4>
            <div style="justify-content: flex-end">
                <ColorPicker
                    :attrAttr="attr"
                    :selectedColor="attr.style.borderColor"
                    colorName="borderColor"
                ></ColorPicker>
            </div>
        </div>
        <div style="margin: 5px; display: flex">
            <h5 style="margin-left: 15px; color: grey">width/px</h5>
            <input
                class="input"
                style="text-align: center"
                :value="attr.style.borderWidth.replace('px', '')"
                @change="
                    (e) => {
                        attr.style.borderWidth = e.target.value + 'px'
                        designStore.rerender()
                    }
                "
            />
            <v-tooltip location="top">
                <template v-slot:activator="{ props }">
                    <select
                        id="select"
                        class="select"
                        v-bind="props"
                        :value="attr.style.borderStyle"
                        @change="
                            (e) => {
                                attr.style.borderStyle = e.target.value
                                designStore.rerender()
                            }
                        "
                    >
                        <option
                            value=""
                            hidden
                        >
                            样式
                        </option>
                        <option value="">null</option>
                        <option value="inset">inset</option>
                        <option value="groove">groove</option>
                        <option value="outset">outset</option>
                        <option value="ridge">ridge</option>
                        <option value="solid">solid</option>
                        <option value="dotted">dotted</option>
                        <option value="dashed">dashed</option>
                        <option value="inherit">inherit</option>
                        <option value="dashed">dashed</option>
                    </select> </template
                >选择边框样式
            </v-tooltip>
        </div>
        <v-divider style="margin: 10px"></v-divider>
        <div style="margin: 10px 10px 10px 13px; display: flex">
            <v-tooltip location="top">
                <template v-slot:activator="{ props }">
                    <v-icon
                        :style="{
                            color:
                                Object.keys(attr.style).includes('borderTop') &&
                                attr.style.borderTop === 'none'
                                    ? 'black'
                                    : 'grey'
                        }"
                        style="margin: 0 5px 0 3px"
                        icon="mdi-border-top-variant"
                        v-bind="props"
                        @click="
                            () => {
                                attr.style.borderTop =
                                    Object.keys(attr.style).includes(
                                        'borderTop'
                                    ) && attr.style.borderTop === 'none'
                                        ? getBorderOriginStyle
                                        : 'none'
                                designStore.rerender()
                            }
                        "
                    ></v-icon> </template
                >清除上边框
            </v-tooltip>
            <v-tooltip location="top">
                <template v-slot:activator="{ props }">
                    <v-icon
                        :style="{
                            color:
                                Object.keys(attr.style).includes(
                                    'borderRight'
                                ) && attr.style.borderRight === 'none'
                                    ? 'black'
                                    : 'grey'
                        }"
                        style="margin: 0 5px 0 3px"
                        icon="mdi-border-right-variant"
                        v-bind="props"
                        @click="
                            () => {
                                attr.style.borderRight =
                                    Object.keys(attr.style).includes(
                                        'borderRight'
                                    ) && attr.style.borderRight === 'none'
                                        ? getBorderOriginStyle
                                        : 'none'
                                designStore.rerender()
                            }
                        "
                    ></v-icon> </template
                >清除右边框
            </v-tooltip>
            <v-tooltip location="top">
                <template v-slot:activator="{ props }">
                    <v-icon
                        :style="{
                            color:
                                Object.keys(attr.style).includes(
                                    'borderBottom'
                                ) && attr.style.borderBottom === 'none'
                                    ? 'black'
                                    : 'grey'
                        }"
                        style="margin: 0 5px 0 3px"
                        icon="mdi-border-bottom-variant"
                        v-bind="props"
                        @click="
                            () => {
                                attr.style.borderBottom =
                                    Object.keys(attr.style).includes(
                                        'borderBottom'
                                    ) && attr.style.borderBottom === 'none'
                                        ? getBorderOriginStyle
                                        : 'none'
                                designStore.rerender()
                            }
                        "
                    ></v-icon> </template
                >清除下边框
            </v-tooltip>
            <v-tooltip location="top">
                <template v-slot:activator="{ props }">
                    <v-icon
                        :style="{
                            color:
                                Object.keys(attr.style).includes(
                                    'borderLeft'
                                ) && attr.style.borderLeft === 'none'
                                    ? 'black'
                                    : 'grey'
                        }"
                        style="margin: 0 5px 0 3px"
                        icon="mdi-border-left-variant"
                        v-bind="props"
                        @click="
                            () => {
                                attr.style.borderLeft =
                                    Object.keys(attr.style).includes(
                                        'borderLeft'
                                    ) && attr.style.borderLeft === 'none'
                                        ? getBorderOriginStyle
                                        : 'none'
                                designStore.rerender()
                            }
                        "
                    ></v-icon> </template
                >清除左边框
            </v-tooltip>
        </div>
    </v-card>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
import ColorPicker from './ColorPicker.vue'
export default {
    name: 'BorderArea',
    components: {
        ColorPicker
    },
    props: {
        attrAttr: Object
    },
    data() {
        return {
            designStore: useDesignStore(),
            attr: this.attrAttr
        }
    },
    methods: {
        getBorderOriginStyle() {
            return (
                this.attr.style.borderWidth +
                ' ' +
                this.attr.style.borderStyle +
                ' ' +
                this.attr.style.borderWColor
            )
        }
    }
}
</script>
